<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>服务</title>
    <!-- <link rel="stylesheet" href="./css/style.css"> -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .body {
            background-color: #fff;

        }

        .root {
            padding: 20px 100px 0 100px;
        }

        .header {
            padding: 20px 20px;
            display: flex;
            align-items: center;
            text-align: center;
            justify-content: space-between;

            /* width: 100%; */
            /* height: 200px; */
            background-color: #fbf6f0;
            box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
        }

        .content {
            /* width: 100%; */
            margin-top: 40px;
            display: flex;
            justify-content: space-between;

        }

        .content-box {
            width: 33%;
            height: 450px;
            background-color: #fbf6f0;
            border-radius: 5px;
        }

        .image {
            width: 100%;
            height: 300px;
            /* border-radius: 5px; */
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
        .cq-image{
            width: 100%;
            height: 300px;
            /* border-radius: 5px; */
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            display: none;
        }
        .content :hover .cq-image{
            display: block;
        }
        .content :hover .image{
            display: none;
        }
        .header1{
            width: 100%;
            /* height: 200px; */
            /* background-color: red; */
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fff;
            box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
        }
        .header-content{
            width: 90%;
            /* height: 100px; */
            /* background-color: green; */
            display: flex;
            justify-content: center;
            text-align: center;
            justify-content: space-between;
        }
        .header-nav{
            margin-top: 20px;
            margin-bottom: 20px;
            display: flex;
            justify-content: center;
            text-align: center;
        }
        .nav-content{
            /* width: 20%; */
            text-align: center;
            /* background-color: red; */
            margin: 0 10px;
            padding: 0 20px;
        }
        a{text-decoration:none}
    </style>
</head>

<body class="body">
    <div class="header1">
        <div class="header-content">
            <div></div>
            <!-- <div>
                <img src="./imgs/01-header/1641206683(1).png" alt="">
            </div> -->
            <div class="header-nav">
                <a href="./index.html">
                    <div class="nav-content">
                        <div>首页</div>
                        <div style="font-size: 10px;color: #c0c0c0;">home</div>
                    </div>
                </a>
                <a href="./anli.html">
                    <div class="nav-content">
                        <div>案例</div>
                        <div style="font-size: 10px;color: #c0c0c0;">case</div>
                    </div>
                </a>
                <a href="./fuwu.html">
                    <div class="nav-content">
                        <div>服务</div>
                        <div style="font-size: 10px;color: #c0c0c0;">service</div>
                    </div>
                </a>
                <a href="./wenzhang.html">
                    <div class="nav-content">
                        <div>文章</div>
                        <div style="font-size: 10px;color: #c0c0c0;">article</div>
                    </div>
                </a>
                <a href="./guanyu.html">
                    <div class="nav-content">
                        <div>关于</div>
                        <div style="font-size: 10px;color: #c0c0c0;">about</div>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <div class="root">
        <div class="header">
            <div>
                <!-- <img src="./imgs/01-header/saoma.png" alt="" style="width: 100px; height: 100px; border-radius: 50%;"> -->
            </div>
            <div style="text-align: center">
                <div style="background-color: #d3bb97;padding: 10px 30px;font-size: 26px;color: #fff;">
                    用我们的信任，换来你的信任，共同维护权益</div>
                <div style="color:#666;font-size:16px;margin-top: 10px; ">诚信铸造品牌，专业成实力</div>
            </div>
            <div></div>
        </div>
        <div class="content">
            <div class="content-box">
                <img src="./imgs/09-image/foot1.png" alt="" class="image">
                <img src="./imgs/01-header/saoma.png" alt=""  class="cq-image">
                <div style="display: flex;align-items: center;margin-top: 10px;">
                    <img src="./imgs/07-solutions/04.png" alt="" style="margin-left: 10px;">
                    <div style="color:#666; margin-left: 10px;font-size: 22px;" >一对一在线咨询</div>
                </div>
                <div style="width: 100%;height: 3px;background-color:#fff;margin: 10px 0;"></div>
                <div style="margin: 0 10px;font-size: 14px;color:#666">打破时间与地域的限制，上千位权威律师全天在线，提供一对一权威解答。
                    您的困难，让专业的律师来解决。</div>
            </div>
            <div class="content-box">
                <img src="./imgs/09-image/foot2.png" alt="" class="image">
                <img src="./imgs/01-header/saoma.png" alt=""  class="cq-image">
                <div style="display: flex;align-items: center;margin-top: 10px;">
                    <img src="./imgs/07-solutions/05.png" alt="" style="margin-left: 10px;">
                    <div style="color:#666; margin-left: 10px;font-size: 22px;" >文书代写</div>
                </div>
                <div style="width: 100%;height: 3px;background-color:#fff;margin: 10px 0;"></div>
                <div style="margin: 0 10px;font-size: 14px;color:#666">只需点进小程序，发布你的需求，千位律师立即响应，给你最权威的答案，快速又高效。</div>
            </div>
            <div class="content-box">
                <img src="./imgs/09-image/foot3.png" alt="" class="image">
                <img src="./imgs/01-header/saoma.png" alt=""  class="cq-image">
                <div style="display: flex;align-items: center;margin-top: 10px;">
                    <img src="./imgs/07-solutions/06.png" alt="" style="margin-left: 10px;">
                    <div style="color:#666; margin-left: 10px;font-size: 22px;" >电话咨询</div>
                </div>
                <div style="width: 100%;height: 3px;background-color:#fff;margin: 10px 0;"></div>
                <div style="margin: 0 10px;font-size: 14px;color:#666">扫码进入小程序后，只需分享三个群将可以获得一次免费咨询的的优惠券，价格亲民还可免费。</div>
            </div>
        </div>
    </div>
</body>

</html>